<template>
  <div class="theme-switch">
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link theme-switch-trigger">
        <i :class="currentThemeIcon"></i>
        <span class="theme-name">{{ currentThemeLabel }}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="theme-dropdown-menu">
        <el-dropdown-item 
          v-for="theme in availableThemes" 
          :key="theme.name"
          :command="{type: 'theme', value: theme.name}"
          :class="{ 'is-active': currentTheme === theme.name }"
        >
          <div class="theme-option">
            <div class="theme-icon-box" :class="`theme-${theme.name}`">
              <i :class="theme.icon"></i>
            </div>
            <span class="theme-label">{{ theme.label }}</span>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ThemeSwitch',
  computed: {
    ...mapGetters({
      currentTheme: 'theme/currentTheme',
      availableThemes: 'theme/availableThemes'
    }),
    currentThemeLabel() {
      const theme = this.availableThemes.find(t => t.name === this.currentTheme)
      return theme ? theme.label : '默认主题'
    },
    currentThemeIcon() {
      const theme = this.availableThemes.find(t => t.name === this.currentTheme)
      return theme ? theme.icon : 'el-icon-magic-stick'
    }
  },
  mounted() {
    // 初始化主题
    this.$store.dispatch('theme/initTheme')
    
    // 如果有背景图片，添加has-bg-image类
    if (this.$store.getters.backgroundImage) {
      const appEl = document.getElementById('app')
      if (appEl) {
        appEl.classList.add('has-bg-image')
      }
    }
  },
  methods: {
    handleCommand(command) {
      if (command.type === 'theme') {
        this.handleThemeChange(command.value)
      }
    },
    handleThemeChange(themeName) {
      if (themeName === this.currentTheme) return
      this.$store.dispatch('theme/changeTheme', themeName)
    }
  }
}
</script>

<style lang="scss" scoped>
.theme-switch {
  display: inline-block;
  margin-right: 15px;
  
  .theme-switch-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: inherit;
    
    i {
      font-size: 16px;
      margin-right: 5px;
    }
    
    .theme-name {
      margin: 0 5px;
      font-size: 14px;
    }
  }
}

/* 主题项目样式 */
::v-deep .el-dropdown-menu__item {
  padding: 8px 15px;
  
  &.is-active {
    color: var(--primary-color);
    background-color: var(--primary-light);
  }
  
  i {
    margin-right: 5px;
  }
  
  .theme-option {
    display: flex;
    align-items: center;
    
    .theme-icon-box {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      
      i {
        margin-right: 0;
        font-size: 14px;
      }
      
      &.theme-light {
        background-color: #ffffff;
        border: 1px solid #e4e7ed;
        color: #303133;
      }
      
      &.theme-dark {
        background-color: #121212;
        color: #e5eaf3;
      }
    }
    
    .theme-label {
      font-size: 14px;
    }
  }
}
</style> 